<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <video src=""></video>
    </div>
    <!-- <button>提交</button> -->
</body>
<script>
    // var button = document.querySelector('button')
    var div = document.querySelector('div')
    var video = document.querySelector('video');
    var socket = new WebSocket('ws://10.25.93.169:3001')
    var constraints = { audio: true, video: { width: 1280, height: 720 } };
    var promise = navigator.mediaDevices.getUserMedia(constraints);

    socket.addEventListener('open', function (event) {
        // socket.send('连接成功');
        console.log('event', event)
        promise.then(mediaStream => {
            console.log('mediaStream', mediaStream)
            let a = JSON.stringify(mediaStream)
            console.log('a', a)
            socket.send(a);

        }).catch(err => {
            console.log('err', err)
            console.log(err.name + ": " + err.message)
        })
    });
    // button.addEventListener('click', () => {
    //     // socket.send(input.value)
    // })  https://www.webrtc-experiment.com/socket.io/#12125730150680791
    socket.addEventListener('message', function (event) {
        console.log('Message from server ', event.data);
        let vi = document.createElement('video')
        // vi.srcObject = mediaStream;
        let b = JSON.parse(event.data)
        vi.srcObject = b;
        vi.onloadedmetadata = function (e) {
            video.play();
        };
        vi.append(div)
    });

    // promise.then(mediaStream => {
    //     console.log('mediaStream', mediaStream)
    //     video.srcObject = mediaStream;
    //     video.onloadedmetadata = function (e) {
    //         video.play();
    //     };
    // }).catch(err => {
    //     console.log('err', err)
    //     console.log(err.name + ": " + err.message)
    // })
</script>

</html>